<template>
  <j-modal
    width="100%"
    title="合同详情"
    :maskClosable="false"
    :fullscreen.sync="fullscreen"
    :switch-fullscreen="switchFullscreen"
    :destroyOnClose="true"
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
    :bodyStyle="{paddingTop:'0px'}"
    :footer="false"
  >
    <a-tabs default-active-key="1" tabPosition="left">
      <a-tab-pane key="1" tab="合同信息">
        <a-descriptions
          title="主要信息"
          :column="{ xxl: 4, xl: 4, lg: 4, md: 4, sm: 2, xs: 1 }"
        >
          <a-descriptions-item label="合同编码">
            {{formData.contractCode}}
          </a-descriptions-item>
          <a-descriptions-item label="合同类型">
            {{filterDictTextByCache('xy_park_contract_type', formData.contractType)}}
          </a-descriptions-item>
          <a-descriptions-item label="跟进人">
            {{formData.bizUserEntity && formData.bizUserEntity.realname}}
          </a-descriptions-item>
          <a-descriptions-item label="收款账户">
            {{formData.account}}
          </a-descriptions-item>
          <a-descriptions-item label="收款公司">
            {{formData.xyParkAccount && formData.xyParkAccount.company}}
          </a-descriptions-item>
          <a-descriptions-item label="开户行">
            {{formData.xyParkAccount && formData.xyParkAccount.depositPark}}
          </a-descriptions-item>
          <a-descriptions-item label="合同期限">
            {{`${formData.startDate}至${formData.endDate}`}}
          </a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-descriptions
          title="乙方"
          :column="{ xxl: 4, xl: 4, lg: 4, md: 4, sm: 2, xs: 1 }"
        >
          <a-descriptions-item label="客户名称">
            {{owner.ownerName}}
          </a-descriptions-item>
          <a-descriptions-item label="客户类型">
            {{owner.ownerType}}
          </a-descriptions-item>
          <a-descriptions-item label="所属行业">
            {{owner.ownerTrade}}
          </a-descriptions-item>
          <a-descriptions-item label="身份证号">
            {{owner.idCard}}
          </a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <h3 style="font-weight: bold;">场地</h3>
        <ContractHousesItemsTable :hasAdd="false" :dataSource="formData.xyParkContractHouses" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="账单信息">
        <h3 style="font-weight: bold;">付款计划</h3>
        <ContractCostItemsTable :hasAdd="false" :dataSource="formData.xyParkContractFees" />
      </a-tab-pane>
    </a-tabs>

  </j-modal>
</template>
<script >
import ContractHousesItemsTable from '../modules/ContractHousesItemsTable'
import ContractCostItemsTable from '../modules/ContractCostItemsTable'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'ContractDetailModal',
  components: {
    ContractHousesItemsTable,
    ContractCostItemsTable
  },
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      fullscreen: true,
      switchFullscreen: true,
      currentSteps: 0,
      syncLoading: false,
      url: {
        add: '/hr/officedoc/add',
        edit: '/hr/officedoc/edit',
        dept: '/hr/officedoc/queryDocOrg'
      },
      formData: {},
      owner: {}
    }
  },
  methods: {
    filterDictTextByCache,
    show(data) {
      this.formData = JSON.parse(JSON.stringify(data))
      this.owner = this.formData.xyParkOwner || {}
      this.editModalVisible = true
    },
    handleCancleDbSync() {
      this.editModalVisible = false
    }
  }
}
</script>
<style lang='scss'>
</style>
